<div>
    <div class="row">
        <div class="col-md-2">
            <div class=" border-radius bg-white padding">
                <div class="margin-xs margin-bottom">
                    <input v-model="staffCommunityInfo.orgName" readonly @focus="_staffAttendanceChangeOrg()"
                        type="text" :placeholder="vc.i18n('填写组织','staffCommunity')" class="form-control">
                </div>
                <div class="margin-xs">
                    <input type="text" :placeholder="vc.i18n('请填写员工名称','monthAttendanceManage')"
                        @keyup.enter="_loadStaffs()" v-model="staffCommunityInfo.staffNameLike" class=" form-control">
                </div>
                <div class="flex justify-end">
                    <div class="margin-xs margin-bottom " style="width: 60px;">
                        <button type="button" class="form-control btn btn-primary" @click="_loadStaffs()">
                            <vc:i18n name="查询" namespace="simplifyAcceptance"></vc:i18n>
                        </button>
                    </div>
                </div>

                <div class="margin-xs-r bg-white treeview attendance-staff">
                    <ul class="list-group text-center border-radius">
                        <li class="list-group-item node-orgTree " v-for="(item,index) in staffCommunityInfo.staffs"
                            @click="swatchStaff(item)"
                            :class="{'vc-node-selected':staffCommunityInfo.curStaffId==item.userId}">
                            {{item.name}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-10 padding-l-0">
            <div class=" border-radius bg-white padding">
                <div class="text-right" v-if="staffCommunityInfo.curStaffId">
                    <button type="button" class="btn btn-primary btn-sm" @click="_openAddStaffCommunityModal()">
                        <vc:i18n name="关联小区"></vc:i18n>
                    </button>
                </div>
                <table class="footable table table-stripped toggle-arrow-tiny margin-top" data-page-size="15">
                    <thead>
                        <tr>
                            <th class="text-center">
                                <vc:i18n name="员工名称" namespace="staffCommunity"></vc:i18n>
                            </th>
                            <th class="text-center">
                                <vc:i18n name="员工编号" namespace="staffCommunity"></vc:i18n>
                            </th>
                            <th class="text-center">
                                <vc:i18n name="小区编号" namespace="staffCommunity"></vc:i18n>
                            </th>
                            <th class="text-center">
                                <vc:i18n name="小区名称" namespace="staffCommunity"></vc:i18n>
                            </th>
                            <th class="text-center">
                                <vc:i18n name="操作" namespace="staffCommunity"></vc:i18n>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="staffCommunity in staffCommunityInfo.communitys">
                            <td class="text-center">{{staffCommunity.staffName}}</td>
                            <td class="text-center">{{staffCommunity.staffId}}</td>
                            <td class="text-center">{{staffCommunity.communityId}}</td>
                            <td class="text-center">{{staffCommunity.communityName}}</td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button class="btn-white btn btn-xs"
                                        v-on:click="_openDeleteRoleCommunityModel(staffCommunity)">
                                        <vc:i18n name="删除"></vc:i18n>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <vc:create path="frame/chooseOrgTree" callBackListener="staffCommunity"></vc:create>
    <vc:create path="staff/addStaffCommunity"></vc:create>
    <vc:create path="staff/deleteStaffCommunity"></vc:create>
    
</div>